<template>
  <view class="add-bill-page">
    <TnSwitchTab v-model:modelValue="currentTabIndex" :tabs="tabs">
      <view v-for="(billConfig, configIndex) in allBillConfig" :key="`tab_${configIndex}`">
        <view v-if="currentTabIndex === configIndex" class="tn-p">
          <cs-btn-grid :items="billConfig.typeList"></cs-btn-grid>
        </view>
      </view>
    </TnSwitchTab>
  </view>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import TnSwitchTab from '@tuniao/tnui-vue3-uniapp/components/switch-tab/src/switch-tab.vue';

const { tabIndex = 0 } = defineProps<{
  tabIndex: number;
}>();

const tabs = ["支出", "收入"];

const allBillConfig = [
  {
    typeList: [
      {
        title: "餐饮",
        icon: "eat-west",
        // children: []
      },
      {
        title: "交通",
        icon: "taxi",
        // children: []
      },
      {
        title: "购物",
        icon: "paperbag",
        // children: []
      },
      {
        title: "住宿",
        icon: "bed",
        // children: []
      },
      {
        title: "日常",
        icon: "bed",
        // children: []
      },
      {
        title: "日常",
        icon: "bed",
        // children: []
      },
      {
        title: "日常",
        icon: "bed",
        // children: []
      },
    ],
  },
  {
    typeList: [
      {
        title: "工资",
        icon: "money",
      },
    ],
  },
];

const currentTabIndex = ref(tabIndex ?? 0);

const typeClick = (e) => {
  const { index } = e?.detail;
  console.log("typeClick", index);
};
</script>

<style scoped lang="scss">
.add-bill-page {}
</style>
